<template>
  <div style="height: 100%">
    <NotificationTitle title="技术产品展示"></NotificationTitle>
    <div style="height: 100%">
      <div class="box">
        <div class="left">
          <el-row class="tac">
            <el-col>
              <el-menu default-active="1" class="el-menu-vertical-demo">
                <el-menu-item index="1" @click="toggleElement(1)">
                  <i class="el-icon-menu"></i>
                  <span slot="title">全部</span>
                </el-menu-item>
                <!-- <el-menu-item index="2" @click="toggleElement(2)">
                  <i class="el-icon-menu"></i>
                  <span slot="title">核心技术</span>
                </el-menu-item>
                <el-menu-item index="3" @click="toggleElement(3)">
                  <i class="el-icon-menu"></i>
                  <span slot="title">特色技术</span>
                </el-menu-item> -->
                <!-- <el-menu-item index="4" @click="toggleElement(4)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                  </el-menu-item> -->
              </el-menu>
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <div v-show="showPage1">
            <div
              style="float: left; padding-top: 20px; padding-left: 20px"
              v-show="showPage0"
            >
              <!-- <el-button type="primary" @click="togglePage(1)" size="small"
                >类别管理</el-button
              > -->
              <el-button type="primary" @click="togglePage(2)" size="small"
                >新建通知</el-button
              >
              <el-popover
                ref="popoverRef"
                placement="bottom"
                width="232"
                trigger="click"
                style="margin: 0 10px"
              >
                <el-select style="margin-bottom: 10px" placeholder="请选择类别">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <div style="float: right">
                  <el-button size="small" @click="hideClick">取消</el-button>
                  <el-button size="small" type="primary" @click="handleConfirm"
                    >确认</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  type="primary"
                  @click="setClick()"
                  size="small"
                  >移动到</el-button
                >
              </el-popover>

              <el-button type="primary" @click="exportClick()" size="small"
                >导出</el-button
              >
            </div>
            <div
              style="
                float: right;
                padding-top: 20px;
                padding-left: 20px;
                padding-right: 20px;
              "
              v-show="showPage0"
            >
              <el-form :inline="true">
                <el-form-item label="标题:">
                  <el-input
                    placeholder="请输入标题"
                    suffix-icon="el-icon-search"
                    v-model="Notice.title"
                    size="small"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="内容:">
                  <el-input
                    placeholder="请输入内容"
                    v-model="Notice.content"
                    suffix-icon="el-icon-search"
                    size="small"
                  >
                  </el-input>
                </el-form-item>
                <el-button @click="handlerSearch" size="small" style="margin-top: 4px"
                  >搜索</el-button
                >
                <el-button @click="reset" size="small" style="margin-right: 7px"
                  >重置</el-button
                >
                <el-form-item>
                  <el-button plain size="small" @click="isShowDialog">高级筛选</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div v-show="form1" style="padding: 0 20px">
              <el-table
                ref="multipleTable"
                :data="tableData"
                :header-cell-style="{
                  background: '#FAFAFA',
                  color: '#000000',
                }"
                tooltip-effect="dark"
                style="width: 100%; margin-bottom: 15px"
              >
                <el-table-column type="selection"> </el-table-column>
                <el-table-column prop="title" label="制度标题"> </el-table-column>
                <el-table-column prop="type" label="类别管理">
                  <template #default="{ row }">
                    {{ desEnum[row.categoryId] }}
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="生效时间"> </el-table-column>
                <el-table-column prop="deadDate" label="终止时间"> </el-table-column>
                <el-table-column prop="creatByName" label="发布人"> </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClickUpdata(scope.row, 2)"
                      type="text"
                      size="small"
                      >编辑</el-button
                    >
                    <el-button type="text" size="small" @click="remove(scope.row)"
                      >移除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <div class="block">
                <el-pagination
                  size="small"
                  @current-change="handleCurrentChange"
                  :page-size="Notice.pageSize"
                  layout=" -> ,prev, pager, next"
                  :total="Notice.total"
                >
                </el-pagination>
              </div>
              <!-- 高级筛选对话框 -->
              <div class="dialog" v-if="isShow">
                <div class="dialog-top">
                  <span>高级筛选</span>
                  <span
                    @click="isShow = false"
                    style="color: #000000; font-size: 23px; opacity: 0.52"
                    >x</span
                  >
                </div>
                <div class="dialog-bottom">
                  <el-form inline size="small">
                    <el-form-item label="发起人">
                      <el-input style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="生效时间" label-width="100px">
                      <el-input style="width: 200px"></el-input>
                    </el-form-item>
                  </el-form>
                  <el-form inline size="small">
                    <el-form-item label="发起人">
                      <el-input style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" label-width="100px">
                      <el-input style="width: 200px"></el-input>
                    </el-form-item>
                  </el-form>
                  <div style="text-align: right; padding-right: 60px">
                    <el-button size="small" type="primary">搜索</el-button>
                    <el-button size="small">重置</el-button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 类别管理 -->
            <div v-show="form2">
              <div v-if="!page">
                <div
                  class="management-title"
                  style="margin-bottom: 20px"
                  v-show="showPage0 == false"
                >
                  <div style="padding-left: 20px">类别管理</div>
                </div>
                <div style="padding: 0 20px" v-show="showPage0 == false">
                  <el-button @click="addData" type="primary" size="small"
                    >新建类别</el-button
                  >
                  <el-button @click="previousPage(2)" type="primary" size="small"
                    >返回</el-button
                  >
                  <el-button type="primary" size="small"
                    >删除</el-button
                  >
                </div>

                <div
                  style="margin-top: 20px; padding: 0 20px"
                  v-show="showPage0 == false"
                >
                  <!-- <el-table
                    ref="multipleTable"
                    :data="tableDataType"
                    :header-cell-style="{
                      background: '#FAFAFA',
                      color: '#000000',
                    }"
                    tooltip-effect="dark"
                    style="width: 100%; margin-bottom: 15px"
                    @selection-change="selsChange"
                  >
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column prop="categoryName" label="类别名称">
                    </el-table-column>
                    <el-table-column prop="categoryNum" label="通知数量">
                    </el-table-column>
                     <el-table-column prop="type" label="类型">
                        <template #default="{ row }">
                          {{ desEnum[row.categoryId] }}
                        </template>
                      </el-table-column> -->
                    <!-- <el-table-column label="操作" width="100">
                      <template slot-scope="scope">
                        <el-button
                          @click="handleUpdataCategory(scope.row)"
                          type="text"
                          size="small"
                          >编辑</el-button
                        >
                        <el-button
                          type="text"
                          size="small"
                          @click="removeCategory(scope.row)"
                          >移除</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table> --> -->
                </div>
                <!-- <div class="block">
                  <el-pagination
                    size="small"
                
                    @current-change="handleCurrentChange1"
                    :page-size="Category.pageSize"
                    layout=" -> ,prev, pager, next"
                    :total="Category.total"
                  >
                  </el-pagination>
                </div> -->
              </div>
              
              <div v-else>
                <span @click="gohome(5)" v-show="isShow == false">富文本</span>
              </div>

              <!-- 新建类别对话框 -->
              <div class="dialog" v-if="isShow">
                <div class="dialog-top">
                  <span>{{ Category.id ? "修改类别" : "新建类别" }}</span>
                  <span
                    @click="isShow = false"
                    style="color: #000000; font-size: 23px; opacity: 0.52"
                    >x</span
                  >
                </div>
                <!-- 新建类型对话框 -->
                <div class="dialog-bottom1">
                  <el-form
                    label-width="100px"
                    size="small"
                    :model="Category"
                    :rules="categoryRule"
                    ref="categoryRule"
                  >
                    <el-form-item label="分类名称" prop="categoryName">
                      <el-input
                        style="width: 200px"
                        v-model="Category.categoryName"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="数量" prop="categoryNum">
                      <el-input
                        type="number"
                        style="width: 200px"
                        v-model="Category.categoryNum"
                      ></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="类型" prop="type">
                        <el-select v-model="Category.type" placeholder="请选择类别">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item> -->
                  </el-form>

                  <div style="padding-left: 98px; padding-top: 20px">
                    <el-button
                      size="small"
                      type="primary"
                      @click="addCategory('categoryRule')"
                      >{{ Category.id ? "修改" : "新建" }}</el-button
                    >
                    <el-button size="small" @click="resetCategory('categoryRule')"
                      >重置</el-button
                    >
                  </div>
                </div>
              </div>
            </div>


            <!-- 富文本页面 -->
            <div v-show="navShow">
              <div class="dialog-top">
                <span>新建技术产品</span>
              </div>
              <div class="wangEditor">
                <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <!-- <el-form-item label="发布人" prop="title">
                       <el-input v-model="ruleForm.title"> </el-input>
                    </el-form-item> -->

                  <el-form-item label="开始时间:" required>
                    <el-col :span="8">
                      <el-form-item prop="effectiveDate">
                        <el-date-picker
                          v-model="ruleForm.effectiveDate"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2"></el-col>
                    <el-col :span="8">
                      <el-form-item prop="deadDate" label="失效时间:">
                        <el-date-picker
                          v-model="ruleForm.deadDate"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item label="标题:" required>
                    <el-col :span="8">
                      <el-form-item prop="title">
                        <el-input
                          v-model="ruleForm.title"
                          style="width: 230px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2"></el-col>
                    <el-col :span="8">
                      <el-form-item prop="categoryId" label="类别:">
                        <el-select
                          v-model="ruleForm.categoryId"
                          placeholder="请选择"
                          style="width: 230px"
                        >
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="内容" prop="content">
                    <MyEditor
                      class="editor"
                      ref="editorVue"
                      :content="ruleForm.content"
                      @changeData="hChangeData"
                    />
                  </el-form-item>
                  <!-- <el-form-item label="附件">
                      <div style="width: 368px">
                        <el-upload
                          ref="uploadFile"
                          drag
                          action="https://jsonplaceholder.typicode.com/posts/"
                          multiple
                          :limit="5"
                          accept=".txt, .zip, .rar"
                          :before-upload="beforeUpload"
                          :on-success="uploadSuccess"
                          :on-error="uploadError"
                          :on-exceed="uploadExceed"
                        >
                          <i class="el-icon-upload"></i>
                          <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                          </div>
                          <div class="el-upload__tip" slot="tip">
                            只能上传txt/zip/rar文件，且不超过10M
                          </div>
                        </el-upload>
                      </div>
                    </el-form-item> -->
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="submitForm('ruleForm', 7)"
                      size="small"
                      >{{ ruleForm.id ? "立即修改" : "立即创建" }}</el-button
                    >
                    <el-button @click="resetForm('ruleForm')" size="small"
                      >重置</el-button
                    >
                    <el-button @click="previousPage(7)" type="primary" size="small"
                      >返回</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
              <!-- <span @click="previousPage(7)">123</span> -->
            </div>
          </div>
          <div v-show="showPage2">页面2</div>
          <div v-show="showPage3">页面3</div>
          <div v-show="showPage4">页面4</div>
        </div>
      </div>
    </div>
  </div>

  <!-- <div class="dashboard-container">
      <div class="dashboard-text">name: {{ name }}</div>
    </div> -->
</template>

<script>
import {
  getNoticeListApi,
  addNoticeApi,
  updataNoticeApi,
  removeNoticeApi,
} from "@/api/techproduct";
import { mapGetters } from "vuex";
// 引入富文本
import MyEditor from "../../components/Wangeditor/index";
export default {
  name: "TechProduct",
  components: {
    MyEditor,
  },
  data() {
    return {
      ids: [],
      showPage0: true,
      showPage1: true,
      showPage2: false,
      showPage3: false,
      showPage4: false,
      value1: "",
      form1: true,
      form2: false,
      input1: "",
      input2: "",
      tableDataType: [],
      tableData: [],
      options: [
        {
          value: "1",
          label: "通知",
        },
        {
          value: "2",
          label: "制度",
        },
        {
          value: "3",
          label: "会议材料",
        },
        {
          value: "4",
          label: "核心特色技术",
        },
      ],
      isShow: false,
      page: false,
      navShow: false,
      publisher: "",
      ruleForm: {
        title: "",
        effectiveDate: "",
        deadDate: "",
        categoryId: "",
        content: "",
      },
      rules: {
        title: [{ required: true, message: "请输入名字", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        region: [{ required: true, message: "请选择活动区域", trigger: "change" }],
        effectiveDate: [{ required: true, message: "请选择日期", trigger: "blur" }],
        deadDate: [{ required: true, message: "请选择发布范围", trigger: "blur" }],
        categoryId: [{ required: true, message: "请选择类别", trigger: "blur" }],
      
      },
      categoryRule: {
        categoryName: [{ required: true, message: "请请入类别名称", trigger: "blur" }],
        categoryNum: [{ required: true, message: "请输入数量", trigger: "blur" }],
        type: [{ required: true, message: "请输入类型", trigger: "change" }],
      },
      props: {},
      watch: {},
      titleUpdates: "1",
      Category: {
        pageSize: 10,
        pageIndex: 1,
        categoryName: "",
        categoryNum: "",
        type: "",
        total: 0,
      },
      Notice: {
        pageSize: 10,
        pageIndex: 1,
        title: "",
        content: "",
        total: 0,
      },
    };
  },
  mounted() {
    this.getNoticeList();
  },
  computed: {
    ...mapGetters(["name"]),
    desEnum() {
      return {
        1: "通知",
        2: "制度",
        3: "会议材料",
        4: "核心特色技术",
      };
    },
  },
  methods: {
    // 通知列表
    async getNoticeList() {
      let res = await getNoticeListApi(this.Notice);
      if (res.execCode == 200) {
        this.tableData = res.rows;
        this.Notice.total = res.total;
      }
    },
    // 通知分类 修改
    handleClickUpdata(row, num) {
      this.showPage0 = num === 5;
      this.form1 = false;
      this.navShow = true;
      // 这里路由传值 动态修改数据
      this.$router.push({ name: "", query: { id: 1 } });
      this.ruleForm = Object.assign({}, this.ruleForm, row);
      this.$refs.editorVue.html = row.content;
    },
    // 搜索标题
    handlerSearch() {
      this.getNoticeList();
    },
    // 删除通知列表
    remove(row) {
      console.log('删除',row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await removeNoticeApi(row.id);
          if (res.execCode == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
          this.getNoticeList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.getNoticeList();
        });
    },
    // 通知分页器
    handleCurrentChange(val) {
      this.Notice.pageIndex = val;
      this.getNoticeList();
    },
    // 类别分页器
    handleCurrentChange1(val) {
      this.Category.pageIndex = val;
      this.getCategoryList();
    },
    // 重置
    reset() {
      this.Notice.title = "";
      this.Notice.content = "";
      this.getNoticeList();
    },
    // 新建通知确定
    submitForm(formName, num) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            let res = await updataNoticeApi({
              id: this.ruleForm.id,
              title: this.ruleForm.title,
              effectiveDate: this.ruleForm.effectiveDate,
              deadDate: this.ruleForm.deadDate,
              content: this.ruleForm.content,
              categoryId: this.ruleForm.categoryId,
            });
            if (res.execCode == "200") {
              this.$message({
                message: "修改成功",
                type: "success",
              });
            }
            this.showPage0 = num === 7;
            this.form1 = true;
            this.navShow = false;
            // 刷新接口
            this.getNoticeList();
          } else {
            let res = await addNoticeApi(this.ruleForm);
            if (res.execCode == "200") {
              this.$message({
                message: "新建成功",
                type: "success",
              });

              // 关闭页面
              this.showPage0 = num === 7;
              this.form1 = true;
              this.navShow = false;
              // 刷新接口
              this.getNoticeList();
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新建重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs.editorVue.html = "";
    },
    // 修改类型
    async handleUpdataCategory(row) {
      this.isShow = true;
      Object.assign(this.Category, row);
    },
    // 多选 changge事件
    selsChange(sels) {
      // this.ids = sels.map(item => item.id).join();
      this.ids = sels.map((item) => item.id).join();
    },
    // 类别重置
    resetCategory() {
      (this.Category.categoryName = undefined), (this.Category.categoryNum = undefined);
    },
    //获取到富文本编辑器的内容
    hChangeData(editDataHtml) {
      let text = this.getText(editDataHtml);
      // 获取最新的html数据
      this.ruleForm.content = text;
      this.warningeditHtml = editDataHtml;
    },
    // 判断富文本编辑器输入是否为空或回车
    getText(str) {
      return str
        .replace(/<[^<p>]+>/g, "") // 将所有<p>标签 replace ''
        .replace(/<[</p>$]+>/g, "") // 将所有</p>标签 replace ''
        .replace(/&nbsp;/gi, "") // 将所有 空格 replace ''
        .replace(/<[^<br/>]+>/g, ""); // 将所有 换行符 replace ''
    },
    toggleElement(page) {
      // 将当前点击的菜单项对应的页面显示，其他页面隐藏  返回为 true  false
      this.showPage1 = page === 1;
      this.showPage2 = page === 2;
      this.showPage3 = page === 3;
      this.showPage4 = page === 4;
    },
    // 切换页面
    togglePage(num) {
      this.form1 = num === 2;
      this.form2 = num === 1;
      if (num == 1) {
        this.titleUpdates = 0;
        this.showPage0 = num === 0;
        this.getCategoryList();
      } else if (num == 2) {
        this.showPage0 = num === 5;
        this.form1 = false;
        this.navShow = true;
        // 这里路由传值 动态修改数据
        this.$router.push({ name: "", query: { id: 1 } });
        // 点击新建 清除修改上一次得信息
        this.ruleForm = {
          title: "",
          effectiveDate: "",
          deadDate: "",
          categoryId: "",
          content: "",
        };
        this.$refs.editorVue.html = "";
        this.$refs.ruleForm.clearValidate();
      }
    },
    // 返回
    previousPage(num) {
      this.form1 = num === 2;
      this.form2 = num === 1;
      this.showPage0 = num === 2;
      if (num == 7) {
        this.showPage0 = num === 7;
        this.form1 = true;
        this.navShow = false;
        this.ruleForm = {
          title: "",
          region: "",
          effectiveDate: "",
          deadDate: "",
          categoryId: "",
          content: "",
        };
        //获取富文本实例  清除html内容
        this.$refs.editorVue.html = "";
      } else if (num == 2) {
        this.titleUpdates = 1;
      }
    },
    // 高级筛选
    isShowDialog() {
      this.isShow = true;
    },
    // 新建类别对话框
    addData() {
      this.isShow = true;
      // 再次点击前重置清除信息
      this.Category = {
        categoryName: undefined,
        categoryNum: undefined,
        type: undefined,
        // 点击新建将id 清空
        id: undefined,
      };
    },
    // 上传文件
    // 文件上传前对文件类型、文件大小判断限制
    beforeUpload(file) {
      const { name, size } = file;
      const index = name.lastIndexOf(".");
      // 判断文件名是否有后缀，没后缀文件错误
      if (index === -1) {
        this.$notify.error({
          title: "错误",
          message: "文件错误，请重新上传！",
        });
        return false;
      }
      const fileType = name.substr(index + 1);
      const acceptFileTypes = ["txt", "zip", "rar"];
      // 判断文件类型
      if (!acceptFileTypes.includes(fileType)) {
        this.$notify.error({
          title: "错误",
          message: "文件类型错误，请重新上传！",
        });
        return false;
      }
      // 判断文件大小
      if (size > 10 * 1024 * 1024) {
        this.$notify.error({
          title: "错误",
          message: "文件大小超过10M，请重新上传！",
        });
        return false;
      }
      // 默认true
      return true;
    },
    // 上传接口调取成功status为200
    uploadSuccess(res) {
      if (res.code != 200) {
        // 文件上传成功
        this.$notify.success({
          title: "成功",
          message: "文件上传成功！",
        });
      } else {
        this.uploadError();
      }
    },
    // 文件上传失败
    uploadError() {
      this.$notify.error({
        title: "错误",
        message: "文件上传失败！",
      });
    },
    // 文件个数超过限制
    uploadExceed() {
      this.$notify.warning({
        title: "提示",
        message: "您已添加了一个文件，如需替换，请先删除已添加的文件！",
      });
    },
    //导出
    exportClick() {
      console.log(this.$refs.popoverRef);
    },
    // 移动到
    setClick() {
      console.log("获取下拉选项数据 移动");
      console.log(this.$refs.popoverRef);
    },
    // 关闭下拉选项
    hideClick() {
      this.$refs.popoverRef.showPopper = false;
      this.value = "";
    },
    handleConfirm() {
      this.hideClick();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item .el-form-item__label {
  text-align: left;
}
// page-sizes选择器
::v-deep .el-pager li {
  &.active {
    //选中时字体颜色、背景色变化
    border-radius: 5px;
    border: 1px solid #1890ff;
  }
}
::v-deep.el-upload-list__item {
  width: 100px;
}

.box {
  margin-top: 15px;
  display: flex;
  height: 100%;

  .left {
    width: 228px;
    height: 92%;
    margin-right: 15px;
    background-color: #ffffff;
  }
  .right {
    flex: 1;
    height: 92%;
    // padding: 20px;
    overflow: auto;
    background-color: #ffffff;
    position: relative;
  }
  .dialog {
    width: 685px;
    height: 257px;
    position: absolute;
    top: 200px;
    left: 360px;
    z-index: 999;
    border: 1px solid #e3dfdf;
    background-color: #ffffff;
    border-top: 3px solid #1890ff;
  }
  .dialog-top {
    padding: 0 20px;
    display: flex;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #323233;
    justify-content: space-between;
    border-bottom: 1px solid #e3dfdf;
  }
  .dialog-bottom {
    padding: 30px 0 0 60px;
  }
  .dialog-bottom1 {
    padding: 30px 0 0 180px;
  }
  .management-title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }
  .wangEditor {
    padding: 20px;
  }
  .upload {
    width: 250px;
    height: 250px;
    border: 1px solid #ccc;
  }
  .upload-content {
    margin: 40px auto;
    width: 400px;
    text-align: center;
  }
}
</style>
